<template>
    <!--个人地址新增-->
    <div class="contain">
        <div class="title">{{form.id?'编辑地址':'新增地址'}}</div>
        <a-form-model ref=form :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="收货人姓名" prop="consignee">
                <a-input v-model="form.consignee" placeholder="请输入姓名"/>
            </a-form-model-item>
            <a-form-model-item label="联系电话" prop="mobile">
                <a-input v-model="form.mobile" placeholder="请输入联系电话" type="tel"/>
            </a-form-model-item>
            <a-form-model-item label="邮政编码" prop="zipcode">
                <a-input v-model="form.zipcode" placeholder="请输入邮政编码"/>
            </a-form-model-item>
            <a-form-model-item label="所在地区" prop="xianqu">
                <a-select v-model="form.province" style="width: 30%;margin-right:5%">
                    <a-select-option value="">省、自治区、直辖市</a-select-option>
                    <a-select-option value="北京市">北京市(京)</a-select-option>
                    <a-select-option value="天津市">天津市(津)</a-select-option>
                    <a-select-option value="河北省">河北省(冀)</a-select-option>
                    <a-select-option value="山西省">山西省(晋)</a-select-option>
                    <a-select-option value="内蒙古自治区">内蒙古自治区(内蒙古)</a-select-option>
                    <a-select-option value="辽宁省">辽宁省(辽)</a-select-option>
                    <a-select-option value="吉林省">吉林省(吉)</a-select-option>
                    <a-select-option value="黑龙江省">黑龙江省(黑)</a-select-option>
                    <a-select-option value="上海市">上海市(沪)</a-select-option>
                    <a-select-option value="江苏省">江苏省(苏)</a-select-option>
                    <a-select-option value="浙江省">浙江省(浙)</a-select-option>
                    <a-select-option value="安徽省">安徽省(皖)</a-select-option>
                    <a-select-option value="福建省">福建省(闽)</a-select-option>
                    <a-select-option value="江西省">江西省(赣)</a-select-option>
                    <a-select-option value="山东省">山东省(鲁)</a-select-option>
                    <a-select-option value="河南省">河南省(豫)</a-select-option>
                    <a-select-option value="湖北省">湖北省(鄂)</a-select-option>
                    <a-select-option value="湖南省">湖南省(湘)</a-select-option>
                    <a-select-option value="广东省">广东省(粤)</a-select-option>
                    <a-select-option value="广西壮族自治区">广西壮族自治区(桂)</a-select-option>
                    <a-select-option value="海南省">海南省(琼)</a-select-option>
                    <a-select-option value="重庆市">重庆市(渝)</a-select-option>
                    <a-select-option value="四川省">四川省(川、蜀)</a-select-option>
                    <a-select-option value="贵州省">贵州省(黔、贵)</a-select-option>
                    <a-select-option value="云南省">云南省(滇、云)</a-select-option>
                    <a-select-option value="西藏自治区">西藏自治区(藏)</a-select-option>
                    <a-select-option value="陕西省">陕西省(陕、秦)</a-select-option>
                    <a-select-option value="甘肃省">甘肃省(甘、陇)</a-select-option>
                    <a-select-option value="青海省">青海省(青)</a-select-option>
                    <a-select-option value="宁夏回族自治区">宁夏回族自治区(宁)</a-select-option>
                    <a-select-option value="新疆维吾尔自治区">新疆维吾尔自治区(新)</a-select-option>
                    <a-select-option value="香港特别行政区">香港特别行政区(港)</a-select-option>
                    <a-select-option value="澳门特别行政区">澳门特别行政区(澳)</a-select-option>
                    <a-select-option value="台湾省">台湾省(台)</a-select-option>
                </a-select>
                <a-input v-model="form.city" placeholder="市" style="width: 30%;margin-right:5%"/>
                <a-input v-model="form.xianqu" placeholder="区/县" style="width: 30%"/>
            </a-form-model-item>
            <a-form-model-item label="详细地址" prop="address">
                <a-input v-model="form.address" placeholder="请输入详细地址"/>
            </a-form-model-item>
            <a-form-model-item label="设置为默认地址">
                <a-switch v-model="form.is_default" />
            </a-form-model-item>
            <a-form-model-item style="text-align: center;margin-left: 25%">
                <a-button type="primary" html-type="submit" @click="onSubmit">
                    保存
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
export default {
    name: 'addressAdd',
    components: {
        /**/
    },
    data() {
        let that = this;
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form: {
                province: '',
                city: '',
                xianqu: '',
                consignee: '',
                zipcode: '',
                address: '',
                mobile: '',
                is_default: false
            },
            rules: {
                consignee: [{ required: true, message: '请输入收货人姓名', trigger: 'change' }],
                mobile: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
                zipcode: [{ required: true, message: '请输入邮政编码', trigger: 'change' }],
                xianqu: [{ required: true,
                    validator:()=> {
                    if(that.form.province === '') {
                        return new Error('请输入省、自治区、直辖市')
                    } else if(that.form.city === '') {
                        return new Error('请输入市')
                    } else if(that.form.xianqu === '') {
                        return new Error('请输入县/区')
                    }
                    return true;
                }}],
                address: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
            },
            provinceList: []
        };
    },
    props: {
        address: {
            type: Object,
            default: () => {
                return {
                    addid: '',
                    province: '',
                    city: '',
                    xianqu: '',
                    consignee: '',
                    zipcode: '',
                    address: '',
                    mobile: '',
                    is_default: false
                }
            }
        }
    },
    watch: {
        address(val) {
            this.form = Object.assign(val || {},{
                addid: val?val.id:null,
                is_default:val?val.is_default!='false':false
            })
        }
    },
    mounted() {
        this.form = Object.assign(this.address || {},{
            addid: this.address?this.address.id:null,
            is_default:this.address?this.address.is_default!='false' : false
        })
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$api.ajaxData({
                        pathName: this.form.id?'doModifyAddress':'doAddAddress',
                        authorization: true,
                        method: 'post',
                        data: Object.assign(this.form)
                    }).then(() =>{
                        this.$emit('submit');
                    });
                } else {
                    return false;
                }
            });
        },
    }
};
</script>
<style scoped lang="scss">
.contain {
    border: 1px solid #f7f7f7;
    background: #fff;
    .title {
        height: 50px;
        margin: 0 20px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }
    .content {
        padding: 40px 0 40px 20px;
        .address-box {
            li {
                position: relative;
                float: left;
                width: 33.33%;
                padding: 15px 10px;
                margin-right: 20px;
                height: 180px;
                font-size: 13px;
                color: #333333;
                border: 1px solid #e4e4e4;
                box-sizing: border-box;
                &.address {
                    .default-tag {
                        position: absolute;
                        top: 3px;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #FFFFFF;
                        background: #ff8080;
                    }
                    .form {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 20px;
                        .label {
                            flex-shrink: 0;
                            width: 70px;
                        }
                        .value {

                        }
                    }
                    .option {
                        .option-btn {
                            float: left;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 10px;
                            color: #999;
                            border: 1px solid #e4e4e4;
                            border-radius: 3px;
                            text-align: center;
                            cursor: pointer;
                        }
                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0,#ff8080 30px,#fff 30px,#fff 40px,#6699ff 40px, #6699ff 70px,#fff 70px,#fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                }
                &.add-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px dashed #e4e4e4;
                    text-align: center;
                    cursor: pointer;
                    span {
                        font-size: 20px;
                        color: #666666;
                        line-height: 28px;
                    }
                }
            }

        }&:after {
             content: '';
             display: block;
             clear: both;
         }
    }
}
</style>
